<template>
  <el-calendar v-model="curDate">
    <!-- <template
      slot="dateCell"
      slot-scope="{date, data}"
    > -->
    <template
      #dateCell="{ date }"
    >
      <!-- {{ date }} ------------- -->
      <!-- 数组方法的灵活运用: -->
      <!-- 先用 split() 按照分隔符切割成数组: ['2022', '06', '11'] -->
      <!-- 再取出最后一个元素, pop() 删除最后一个元素并返回 -->
      <!-- {{ data.day.split('-').pop() }} -->
      <!-- substr: 截取字符串, 传入索引 -->
      <!-- {{ data.day.substr(8) }} -->
      <!-- getDate() 获取当前的日 -->
      {{ date.getDate() }} <span class="rest">{{ isWeekend(date) ? '休' : '' }}</span>
    </template>
  </el-calendar>
</template>

<script>
export default {
  data() {
    return {
      curDate: new Date()
    }
  },
  methods: {
    isWeekend(date) {
      return date.getDay() === 0 || date.getDay() === 6
    }
  }
}
</script>

<style lang="scss" scoped>
.rest {
  background-color: yellow;
  border-radius: 50%;
  color: green;
  font-size: 10px;
}

</style>
